<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        *{ padding:0; margin:0; list-style:none;}
        .box{ width:300px; height:300px; border:1px solid red; margin:100px auto;}
        .box input{ width:100px; float:left; height:30px;}
        .box .active{ background:red; color:#FFF;}
        .box li{ width:300px; height:270px; background:chocolate; font-size:100px; text-align:center; line-height:270px; color:white; display:none;}
        .box .show{ display:block;}
        .box section{ overflow:hidden;}
        button{width: 150PX;}
    </style>
    <script>
        class Tab{
            constructor(str){
                //属性
                this.parent=document.querySelector(str);
                this.aBtnList=this.parent.querySelectorAll('input');
                this.aLiList=this.parent.querySelectorAll('li');
                this.btn1 = this.parent.querySelector("#btn1");
//                console.log(this.btn1)
                this.btn2 = this.parent.querySelector("#btn2");
//                console.log(this.btn2)
                //初始化事件
                this.show();
            }
            show(){
                let _this=this;
                for(let i=0; i<this.aBtnList.length;i++){
                    this.aBtnList[i].onclick=function(){
                        _this.index=i;
                        _this.fn(i);
                    };
                }
            }
            fn(i){
//                console.log(this);//自动转向对象本身
                for(var j=0;j<this.aLiList.length;j++){
                    this.aBtnList[j].className='';
                    this.aLiList[j].className='';
                }
                this.aLiList[i].className='show';
                this.aBtnList[i].className='active';
            }
        }

        class AutoPlayTab extends Tab{
            constructor(str){
                //继承属性
                super(str);
                this.leftright();
                this.index=0;
            }
            leftright(){
                var _this=this;
              this.btn1.onclick = function () {
                    _this.index --
                  if(_this.index < 0) {
                      _this.index = _this.aBtnList.length - 1;
                  }
                    _this.fn(_this.index);
                }
               this.btn2.onclick = function () {
                    _this.index ++
                   if(_this.index == _this.aBtnList.length) {
                       _this.index = 0;
                   }
                    _this.fn(_this.index)
                }
            }
        }
        window.onload=function(){
            new Tab('#box');
            new AutoPlayTab('#box');
        }

    </script>
</head>

<body>
<div class="box" id="box">
	<button id="btn1"><</button>
	<button id="btn2">></button>
    <section class="btnBox">
        <input class="active" type="button" value="1" />
        <input type="button" value="2" />
        <input type="button" value="3" />
    </section>
    <ul>
        <li class="show">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
</body>
</html>











